<div class="form-inline simple-row" data-prop-name="<%= fieldName %>" data-prop-type="<%= fieldType %>" >
    <div id="<%= IDs.propertyInfoId%>" class="property-info">
        <span class="field-name col-form-label col-form-label-sm"> <%= fieldName %> </span>
        <span class="field-type col-form-label col-form-label-sm"> <%= fieldType %> </span>
    </div>
    <div id="<%= IDs.propertyEditorId %>" class="form-inline property-editor" style="display: none;">
        <label for="field-name-input" class="col-form-label col-form-label-sm mr-2">Name:</label>
        <input id="<%= IDs.nameInputId %>" type="text" name="field-name-input" placeholder="name"
               class="form-control form-control-sm w-auto mr-3">
        <label for="field-type-selection" class="col-form-label col-form-label-sm mr-2">Type:</label>
        <select id="<%= IDs.typeSelectionId %>" name="field-type-selection" class="custom-select custom-select-sm w-auto mr-3">
            <option value="string">string</option>
            <option value="number">number</option>
            <option value="integer">integer</option>
            <option value="boolean">boolean</option>
        </select>
        <button id="<%= IDs.addButtonId %>" class="add-btn btn btn-sm btn-outline-success mr-3" disabled="true">
            <i class="fas fa-check-circle"></i>
        </button>
        <button id="<%= IDs.cancelButtonId %>" class="cancel-btn btn btn-sm btn-outline-warning">
            <i class="fas fa-times-circle"></i>
        </button>
    </div>
    <div class="remove-btn-block">
        <button id="<%= IDs.editButtonId%>" class="edit-btn btn btn-sm btn-outline-secondary mr-2">
            <i class="fas fa-pencil-alt"></i>
        </button>
        <button id="<%= IDs.removeButtonId %>" class="remove-btn btn btn-sm btn-outline-danger mr-2">
            <i class="fas fa-trash-alt"></i>
        </button>
    </div>
</div>